<template>
  <el-dialog
    :before-close="handleClose"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :title="globalData.title"
    :visible.sync="isDialog"
    width="900px"
  >
    <el-form
      ref="submitFormRef"
      :model="submitForm"
      :rules="submitFormRules"
      label-position="right"
      label-width="auto"
    >
      <el-form-item label="名称" prop="name">
        <el-input
          v-model="submitForm.name"
          clearable
          placeholder="请输入名称"
          type="text"
        ></el-input>
      </el-form-item>

      <el-form-item label="封面图" prop="picture_path">
        <el-upload
          :http-request="uploadImage"
          :show-file-list="false"
          action="#"
          list-type="picture-card"
        >
          <el-image
            v-if="submitForm.picture_path"
            :src="submitForm.picture_path"
            class="image-box"
          >
            <div slot="error" class="image-slot">
              <img alt="没有图片" src="@/assets/imgs/error-img.png" />
            </div>
          </el-image>
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
        <div>
          <span class="color-tips1">提示：请上传宽800px高800px的图片</span>
        </div>
      </el-form-item>

      <el-form-item label="规格">
        <div class="spec_cllection">
          <div
            v-for="(item, index) in submitForm.spec_collection"
            :key="item.skuId"
            class="item"
          >
            <div class="spec">
              <div class="name flex">
                <span>名称：</span>
                <el-input
                  v-model="item.name"
                  placeholder="请输入规格名称"
                  type="text"
                >
                </el-input>
              </div>
              <div class="price flex">
                <span>价格：</span>
                <el-input
                  v-model="item.price"
                  placeholder="请输入价格"
                  type="number"
                >
                </el-input>
              </div>
            </div>
            <el-button size="mini" type="danger" @click="delSku(index)">
              删除
            </el-button>
          </div>
        </div>
        <div class="add">
          <el-button class="addSku" type="primary" @click="addSku">
            添加规格
          </el-button>
        </div>
      </el-form-item>

      <el-form-item label="运费" prop="freight">
        <el-input
          v-model="submitForm.freight"
          :min="0"
          clearable
          placeholder="请输入运费"
          type="number"
        ></el-input>
      </el-form-item>
    </el-form>

    <div slot="footer">
      <el-button @click="handleClose">取消</el-button>
      <el-button
        :loading="isLoading.submit"
        type="primary"
        @click="handleSubmit"
      >
        确 定
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
import { edit, info } from "@/api/goods";
import { upload as uploadFiles } from "@/api/image";
import { nanoid } from "nanoid";

export default {
  name: "Edit",
  props: {
    info: {
      type: Object,
    },
  },
  data() {
    return {
      // 表单提交
      submitForm: {
        goods_id: 1,
        name: "",
        picture_path: "",
        spec_collection: [],
        freight: "",
      },
      // 表单验证
      submitFormRules: {
        name: [{ required: true, message: "请输入名称", trigger: "blur" }],
        picture_path: [
          { required: true, message: "请上传缩略图", trigger: "blur" },
        ],
        freight: [{ required: true, message: "请输入运费", trigger: "blur" }],
      },
      // 数据
      globalData: {
        title: "",
      },
      // 加载状态
      isLoading: {
        submit: false,
      },
      // 是否弹窗
      isDialog: true,
    };
  },
  created() {
    this.globalData.title = "蜂场商品";
    this.getData();
  },
  methods: {
    getData() {
      info({
        goods_id: this.submitForm.goods_id,
      }).then((res) => {
        let dataInfo = res.data.info;
        this.submitForm = {
          goods_id: dataInfo.goods_id,
          name: dataInfo.name,
          freight: dataInfo.freight,
          picture_path: dataInfo.picture_path,
          spec_collection: dataInfo.spec_collection,
        };
      });
    },
    // 提交
    handleSubmit() {
      this.$refs.submitFormRef.validate((valid) => {
        if (!valid) {
          return false;
        }
        this.isLoading.submit = true;

        edit(this.submitForm)
          .then(() => {
            this.isLoading.submit = false;
            this.$emit("close");
          })
          .catch(() => {
            this.isLoading.submit = false;
          });
      });
    },
    // 图片上传
    uploadImage(param) {
      const fileObj = param.file;
      const form = new FormData();
      form.append("file", fileObj);
      uploadFiles(form).then((res) => {
        this.submitForm.picture_path = res.data.fileurl;
      });
    },
    // 添加 - 门牌
    addSku() {
      this.submitForm.spec_collection.push({
        skuId: nanoid(),
        name: "",
        price: "",
      });
    },
    // 删除 - 门牌
    delSku(index) {
      let length = this.submitForm.spec_collection.length;
      if (length <= 1) {
        this.$message({
          type: "error",
          message: "请至少保留一项",
        });
        return;
      }
      this.submitForm.spec_collection.splice(index, 1);
    },
    // 关闭
    handleClose() {
      this.$emit("close", "cancel");
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-textarea textarea {
  font-family: "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
}

::v-deep .tox-tinymce {
  min-height: 500px;
}

.image-box {
  width: 100%;
  height: 100%;
}

.spec_cllection {
  margin-bottom: 20px;
}

.add {
  text-align: center;
}

.item {
  display: grid;
  align-items: center;
  grid-template-columns: 1fr 60px;
  grid-gap: 10px;
  margin-bottom: 10px;

  .spec {
    width: 100%;
    display: grid;
    align-items: center;
    grid-gap: 10px;
    grid-template-columns: repeat(2, 1fr);

    .flex {
      display: grid;
      grid-template-columns: 50px 1fr;
    }
  }
}
</style>
